<template>
  <div class="tabs">
    <el-form label-position="top" :model="formInfo">
      <el-tabs v-if="formInfo.id">
        <el-tab-pane :label="$t('workFlow.Start.tabBasicConfig')">
          <el-form-item>
            <label>{{$t('workFlow.Start.nodeName')}}</label>
            <el-input v-model="formInfo.name"></el-input>
          </el-form-item>		  
		  <el-form-item>
		    <label>{{$t('curProgress')}}</label>
		    <el-input v-model="formInfo.currentProgress" 
		  			:max="99" type="number" :min="1"><template slot="append">%</template></el-input>
		  </el-form-item>
          <el-form-item>
            <label>{{$t('workFlow.Start.nodeDescr')}}</label>
            <el-input
              v-model="formInfo.documentation"
              type="textarea"
              :rows="4"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <label>{{$t('workFlow.End.noticeStrategy')}}</label>
            <el-checkbox-group v-model="formInfo.messageTypes">
              <el-checkbox :label="10">{{$t('workFlow.End.systemInfor')}}</el-checkbox>
              <el-checkbox :label="11">{{$t('workFlow.End.shortMessage')}}</el-checkbox>
              <el-checkbox :label="12">{{$t('workFlow.End.enterpriseWeChat')}}</el-checkbox>
              <el-checkbox :label="13">{{$t('workFlow.End.dingDing')}}</el-checkbox>
              <el-checkbox :label="14">{{$t('workFlow.End.mailbox')}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane :label="$t('workFlow.callActivity.tabSubflow')" name="second">
          <el-form-item>
            <el-radio v-model="formInfo.asynchronousdefinition" :label="true">{{$t('workFlow.callActivity.radioAsynchronous')}}</el-radio>
            <el-radio v-model="formInfo.asynchronousdefinition" :label="false">{{$t('workFlow.callActivity.radioSynchronize')}}</el-radio>
          </el-form-item>
          <el-form-item>
            <label>{{$t('workFlow.callActivity.calledElement')}}</label>
            <div class="callactivity-box"  @click="openDialog">
              {{formInfo.callactivitycalledelement=={}?"请填写被调用元素":formInfo.callactivitycalledelement.F_Name}}
              <i slot="suffix" class="callactivity-icon el-icon-more"></i>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="sub-tabs" v-if="showTabs">
               <el-tabs type="card">
                <el-tab-pane :label="$t('workFlow.callActivity.tabInputParameters')">
                  <div class="flex-box bt fw">
                    <span
                      class="flex-item opr el-icon-plus"
                      @click="addImportBox"
                    ></span>
                    <span class="flex-item">{{$t('workFlow.callActivity.variableSourceMain')}}</span>
                    <span class="flex-item">{{$t('workFlow.callActivity.targetVariableSub')}}</span>
                  </div>
                  <div
                    class="flex-box bt"
                    v-for="(item, index) in formInfo.callactivityinparameters
                      .inParameters"
                    :key="index"
                  >
                    <span class="flex-item opr" @click="delImportBox(index)"
                      >{{$t('tableOperationModule.deleteBtn')}}</span
                    >
                    <span class="flex-item">
                       <ParameterTree :key="showKey" v-model="item.source" :list="sourceList" mainLabelKey="label" mainValueKey="id"></ParameterTree>
                    </span>
                    <span class="flex-item">
                        <ParameterTree :key="showKey" v-model="item.target" :list="targetList" mainLabelKey="label" mainValueKey="id"></ParameterTree>
                    </span>
                  </div>
                </el-tab-pane>
                <el-tab-pane :label="$t('workFlow.callActivity.tabOutputParameters')">
                  <div class="flex-box bt fw">
                    <span
                      class="flex-item opr el-icon-plus"
                      @click="addOutputBox"
                    ></span>
                    <span class="flex-item">{{$t('workFlow.callActivity.variableSourceSub')}}</span>
                    <span class="flex-item">{{$t('workFlow.callActivity.targetVariableMain')}}</span>
                  </div>
                  <div
                    class="flex-box bt"
                    v-for="(item, index) in formInfo.callactivityoutparameters.outParameters"
                    :key="index"
                  >
                    <span class="flex-item opr" @click="delOutputBox(index)"
                      >{{$t('tableOperationModule.deleteBtn')}}</span
                    >
                    <span class="flex-item">
                      <ParameterTree :key="showKey" v-model="item.source" :list="targetList" mainLabelKey="label" mainValueKey="id"></ParameterTree>
                    </span>
                    <span class="flex-item">
                      <ParameterTree :key="showKey" v-model="item.target" :list="sourceList" mainLabelKey="label" mainValueKey="id"></ParameterTree>
                    </span>
                  </div>
                </el-tab-pane>
              </el-tabs>
              
            </div>
          </el-form-item>
            <el-form-item>
              <span>发起人设置 : <em class="form-required">请不要选择子流程之后的节点作为发起人！（无法获取到发起人，子流程将无法进行）</em></span>
            </el-form-item> 
          <el-form-item>
            <label><em class="form-required">*</em>子流程发起人：</label>
            <el-select
              v-model="formInfo.subProcessInitiator"
            >
              <el-option
                v-for="(item, index) in subProcessInitiator"
                :key="index"
                :label="item.resourceName?item.resourceName:item.resourceType"
                :value="item.resourceId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs> 

     
    </el-form>
    <el-dialog v-dialogDrag
      :title="$t('workFlow.callActivity.titleSelectTemplate')"
      :visible.sync="dialogVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
      @closed="closeDialog"
    >
      <LaunchList
        ref="SelectFlow"
        v-if="dialogVisible"
        style="height: 100%;"
        :selectList="selectList"
        :isSingle="true"
        :showLeftTree="true"
        :showSearch="true"
      >
      </LaunchList>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">{{$t('buttonModule.modalCancelBtn')}}</el-button>
        <el-button size="small" type="primary" @click="submitDialog">{{$t('buttonModule.modalSureBtn')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixinNode from "./../mixin/mixinNode";
import LaunchList from "@/components/workflow/LaunchList";
import { getInfoPropertiesMap } from "./../common/util/properties";
import { NodeName } from "./../lang/zh";
import { getInfo } from "@/api/bpmn";
import { objToStrMap } from "./../common/util/util";
import { getSubProcessInitiator } from "./../common/util/variable";
import ParameterTree from "./property/ParameterTree.vue";
import { getProcessParametersData } from "./../common/util/properties";
export default {
  mixins: [mixinNode],
  components: {
    LaunchList,
    ParameterTree
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      dialogVisible: false,
      selectList: [],
      outputBox: [],
      sourceList: [],
      targetList: [],
      variableMap:new Map(),
      subProcessInitiator:[],
      showKey:1,
      showTabs:true
    };
  },
  watch: {
  	"formInfo.currentProgress": function(val) {
      if (val>=100) {
        this.formInfo.currentProgress = 99;
      }else if (val<1) {
        this.formInfo.currentProgress = '';
      }else{
      	this.formInfo.currentProgress=parseInt(val)
      }
    }
  },
  mounted() {
    this.subProcessInitiator = getSubProcessInitiator();
    this.initData();
  },
  methods: {
    async initData() {
      this.changeVariableSourceList();
      if(this.formInfo
      &&this.formInfo.callactivitycalledelement
      &&this.formInfo.callactivitycalledelement.F_ModelId){
        let modulesId = this.formInfo.callactivitycalledelement.F_ModelId;
         await this.changeVariableTargetList(modulesId);
          this.showKey++;
      }
    },
    changeVariableSourceList() {
      let info = getInfoPropertiesMap();
      let list = this.getVariableeList(info);
      //增加流程参数
      let variableRulesList = getProcessParametersData();
      this.sourceList = [...variableRulesList,...list];
    },
    async changeVariableTargetList(modulesId){
      let res = await getInfo(modulesId);
        if(res.data.success){
          let info = this.redrawProperties(res.data.data.json);
           let list = this.getVariableeList(info);
          this.targetList = list;
        }else{
          this.targetList = [];
        }
    },
    redrawProperties(json) {
      let { childShapes } = JSON.parse(json);
      let ObjMapJson = {};
      childShapes.forEach((element) => {
        ObjMapJson[element.resourceId] = element.properties;
        let subChildShapes = element.childShapes;
        if (subChildShapes && subChildShapes.length > 0) {
          subChildShapes.forEach((element2) => {
            ObjMapJson[element2.resourceId] = element2.properties;
          });
        }
      });
      return objToStrMap(ObjMapJson);
    },
    getVariableeList(info) {
      let list = [];
      for (let element of info.values()) {
        let type = element.type;
        let label = NodeName[element.type];
        let name = element.name ? "-" + element.name : "";
        let resourceName = label + name;
        if (type == "bpmn:StartEvent") {
          let id = element.id;
          let tableData = element.tableData;
          let tempJson = {
            value:id,
            id: id,
            label: resourceName,
            type: "resource",
            children: [],
             disabled: true,
          };
          tempJson.children = this.getFormSourceChildren(
            id,
            resourceName,
            tableData
          );
          list.push(tempJson);
        }
        if (type == "bpmn:CallActivity") {
          let id = element.id;
          let tempJson = {
            value:id,
            id: id,
            label: resourceName,
            type: "resource",
            children: [],
             disabled: true,
          };
         list.push(tempJson);
        }
        if (type == "bpmn:UserTask") {
          let id = element.id;
          let tempJson = {
            value:id,
            id: id,
            label: resourceName,
            type: "resource",
            children: [],
             disabled: true,
          };
          let children1 = this.getButtonSourceChildren(
            id,
            resourceName,
          );
          let tableData = element.tableData;
          let children2 = this.getFormSourceChildren(
            id,
            resourceName,
            tableData
          );
          tempJson.children = [...children1, ...children2];
          list.push(tempJson);
        }
      }
      return list;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    openDialog() {
      this.dialogVisible = true;
    },
    async submitDialog() {
      this.showTabs = false;
      let selectList = this.$refs.SelectFlow.getCheckedList();
      this.formInfo.callactivitycalledelement = selectList.length>0?selectList[0]:{};
      if(this.formInfo
      && this.formInfo.callactivitycalledelement
      && this.formInfo.callactivitycalledelement.F_ModelId){
        let modulesId = this.formInfo.callactivitycalledelement.F_ModelId;
         await this.changeVariableTargetList(modulesId);
      }
      setTimeout(()=>{
        this.showTabs = true;
      },1);
      this.closeDialog();
    },

    addImportBox() {
      let index = this.formInfo.callactivityinparameters.inParameters.length;
      this.formInfo.callactivityinparameters.inParameters.push({
        index,
        source: {
          id:"",
          resourceId:'',
          resourceName:''
        },
        target:{
          id:"",
          resourceId:'',
          resourceName:''
        },
        sourceExpression: "=",
      });
    },
    delImportBox(index) {
      if (
        this.formInfo.callactivityinparameters.inParameters &&
        this.formInfo.callactivityinparameters.inParameters.length > 0
      ) {
        this.formInfo.callactivityinparameters.inParameters.splice(index, 1);
         this.showKey++;
      }
    },
    addOutputBox() {
       let index = this.formInfo.callactivityoutparameters.outParameters.length;
      this.formInfo.callactivityoutparameters.outParameters.push({
         index,
        source: {
          id:"",
          resourceId:'',
          resourceName:''
        },
        target:{
          id:"",
          resourceId:'',
          resourceName:''
        },
        sourceExpression: "=",
      });
    },
    delOutputBox(index) {
      if (this.formInfo.callactivityoutparameters.outParameters && this.formInfo.callactivityoutparameters.outParameters.length > 0) {
        this.formInfo.callactivityoutparameters.outParameters.splice(index, 1);
        this.showKey++;
      }
    },
    getFormSourceChildren(resourceId, resourceName, tableData) {
      let children = [];
      tableData.forEach((ele1) => {
        let formName = ele1.F_Name;
        let formId = ele1.F_Id;
        let subJson = {
          value:resourceId+ele1.F_Id,
          id: ele1.F_Id,
          label: formName,
          type: "form",
          children: [],
          disabled: true,
        };
        if (ele1.children&&ele1.children.length > 0) {
          ele1.children.forEach((ele2) => {
            if (ele2.fieldsId) {
              let temp={
                value:resourceId+ele1.F_Id+ele2.fieldsId,
                id: resourceId+ele1.F_Id+ele2.fieldsId,
                label: ele2.fieldsName,
                bindTable:ele2.bindTable,
                fieldsId:ele2.fieldsId,
                resourceId,
                resourceName,
                formName,
                formId,
                type: "condition",
                disabled: false,
              };
              subJson.children.push(temp);
              this.variableMap.set(temp.value,temp);
            }
          });
        }
        children.push(subJson);
      });
      return children;
    },
    getButtonSourceChildren(resourceId, resourceName) {
      let children = [];
      let temp = {
        value:resourceId+'button',
        id: resourceId,
        label: "按钮组",
        type: "button",
        resourceId,
        resourceName,
         disabled: false,
      };
      children.push(temp);
      this.variableMap.set(temp.value,temp);
      return children;
    },
  },
};
</script>

<style lang="css" scoped>
.callactivity-box{
  position: relative;
      border: 1px solid #d6d6d6;
    height: 30px;
}
.callactivity-icon{
  position:absolute;
  right: 5px;
  line-height: 30px;
}
.tabs /deep/ .el-checkbox:last-of-type {
  /* width: 100%; */
}
.tabs /deep/ .el-checkbox__label {
  font-size: 12px;
}
.tabs .sub-tabs /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
  font-size: 12px;
}
.tabs .sub-tabs {
  margin-top: 20px;
}
.tabs .sub-tabs /deep/ .el-tabs__content {
  border: none;
  /* padding: 0; */
}
.flex-box {
  display: flex;
}
.flex-box .flex-item {
  flex-basis: 30%;
  line-height: 40px;
  height: 40px;
  margin-left: 1%;
  margin-right: 1%;
}
.bt {
  border-bottom: 1px solid #e4e4e4;
}
.fw {
  font-weight: 700;
}
.opr {
  color: #02a7f0;
  cursor: pointer;
}
.form-required{
  font-style: normal;
  color: red;
}
</style>
